import React from 'react'
import { 
  BookmarkPlus, 
  Eye, 
  Bell, 
  TrendingUp,
  Calendar
} from 'lucide-react'

interface ActivityItem {
  id: string
  type: 'saved' | 'viewed' | 'alert' | 'milestone'
  title: string
  description?: string
  timestamp: string
  icon: React.ReactNode
}

export function ActivityFeed() {
  // Mock activity data - this would come from an API
  const activities: ActivityItem[] = [
    {
      id: '1',
      type: 'saved',
      title: 'Paper saved',
      description: 'Attention Is All You Need',
      timestamp: '2 hours ago',
      icon: <BookmarkPlus className="h-4 w-4" />
    },
    {
      id: '2', 
      type: 'viewed',
      title: 'Paper read',
      description: 'BERT: Pre-training of Deep...',
      timestamp: '4 hours ago',
      icon: <Eye className="h-4 w-4" />
    },
    {
      id: '3',
      type: 'alert',
      title: 'New alert match',
      description: '3 papers match "transformer"',
      timestamp: '1 day ago',
      icon: <Bell className="h-4 w-4" />
    },
    {
      id: '4',
      type: 'milestone',
      title: 'Reading streak',
      description: '7 days in a row!',
      timestamp: '1 day ago',
      icon: <TrendingUp className="h-4 w-4" />
    }
  ]

  const getActivityColor = (type: ActivityItem['type']) => {
    switch (type) {
      case 'saved': return 'text-blue-600 bg-blue-50'
      case 'viewed': return 'text-green-600 bg-green-50'
      case 'alert': return 'text-purple-600 bg-purple-50'
      case 'milestone': return 'text-orange-600 bg-orange-50'
      default: return 'text-gray-600 bg-gray-50'
    }
  }

  return (
    <div className="bg-white rounded-lg border border-gray-200 p-6">
      <div className="flex items-center justify-between mb-4">
        <h3 className="font-semibold text-gray-900">Recent Activity</h3>
        <Calendar className="h-4 w-4 text-gray-400" />
      </div>

      <div className="space-y-4">
        {activities.map((activity) => (
          <div key={activity.id} className="flex items-start space-x-3">
            <div className={`p-2 rounded-lg ${getActivityColor(activity.type)}`}>
              {activity.icon}
            </div>
            <div className="flex-1 min-w-0">
              <p className="text-sm font-medium text-gray-900">
                {activity.title}
              </p>
              {activity.description && (
                <p className="text-sm text-gray-600 truncate">
                  {activity.description}
                </p>
              )}
              <p className="text-xs text-gray-500 mt-1">
                {activity.timestamp}
              </p>
            </div>
          </div>
        ))}
      </div>

      <div className="mt-4 pt-4 border-t border-gray-100">
        <button 
          className="text-sm text-blue-600 hover:text-blue-700 font-medium"
          onClick={() => window.location.href = '/app/history'}
        >
          View all activity →
        </button>
      </div>
    </div>
  )
}